<template>
  <div class="DetatilTopBrief">
    <h2>{{ houseBrief?.houseName }}</h2>
    <div class="houseTags">
      <span v-for="(item, index) in houseBrief?.houseTags"
        :style="{ color: item.tagText?.color, backgroundColor: item.tagText?.background?.color }">{{ item.tagText?.text
        }}</span>
    </div>

    <div class="commentBrief common">
      <div class="left">
        <div class="overall">{{ houseBrief?.commentBrief?.overall }}</div>
        <div class="scoreTitle">{{ houseBrief?.commentBrief?.scoreTitle }}</div>
        <div class="commentBrief">{{ houseBrief?.commentBrief?.commentBrief }}</div>
      </div>
      <div class="right">
        <div class="totalCount">{{ houseBrief?.commentBrief?.totalCount }}条评价<van-icon name="arrow" /></div>
      </div>
    </div>

    <div class="nearByPosition common">
      <div class="left">
        <div class="address">{{ houseBrief?.nearByPosition?.address }}</div>
      </div>
      <div class="right">
        <div class="mapNear">地图 周边<van-icon name="arrow" /> </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const props = defineProps({
  houseBrief: {
    type: Object,
    default: () => ({})
  }
})


</script>

<style scoped lang="less">
.DetatilTopBrief {
  .houseTags>span {
    margin: 0 3px;
  }

  .common {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0;
    padding: 0 6px;
    height: 28px;
    background-color: #f5f7fa;

    .left {
      display: flex;
    }

    .right{
      color: var(--primary-color);
    }
  }

  .commentBrief {
    .left {
      line-height: 28px;

      .overall {
        font-size: 18px;
        font-weight: bold;
      }

      .scoreTitle {
        margin: 0 8px;
      }
    }
  }

  .nearByPosition {
    .left {
      font-weight: bold;
    }
  }
}
</style>
